<template>
  <div class="cont">
      <div class="cont_top">
        <van-icon name="arrow-left" @click="onBack()"/>
        <p class="cont_text">商品详情</p>
      </div> 
      <div class="cont_content">
            <img :src="list.small_image" alt="">
            <p class="cont_name">{{list.name}}</p>
            <p class="cont_js">{{list.spec}}</p>
            <p class="cont_price">
                <span style="font-size:.35rem;color:red">￥{{list.price}}</span>
                <span style=" text-decoration: line-through;color:#888">￥{{list.origin_price}}</span>
                <span style="font-size:.35rem;color:red;margin-left:2.4rem;">已售：{{list.total_sales}}</span>
            </p>
            <p class="cont_price1">此商品按500g/份计价,如实收少于500g将退还差价</p>
            <p class="cont_shop">
                <van-icon name="clock-o" />
                <span>最快29分钟内送达</span>
            </p>

            <div class="cont_size" >
                <p class="cont_title">规格</p>
                <p style="color:#666">
                    <span >保存条件</span>
                     <span style="margin-left:1rem;">冷藏</span>
                </p>
                <p style="color:#666">
                    <span >保质期</span>
                     <span style="margin-left:1rem;">18天</span>
                </p>
            </div>
            <img :src="list.small_image" alt="">
            <div class="price_cont">
                <p style="font-weight:bold">价格说明</p>
                <p style="font-size:.28rem;color:#888">划线价格:该价格并非《中华人民共和国价格法》及《禁止价格欺诈行为的规定》等相关法律法规中所指商品“原价”的含义,仅为商品的指导价、正品零售价或叮咚买菜曾经向用户展示的销售价,仅供您参考,并非原价。未划线价格:该价格是指商品在叮咚买菜对用户展示的销售价,具体的成交价格可能会因用户使用优惠券、积分等而发生变化,最终以订单结算页价格为准。</p>
                <p style="font-size:.28rem;color:#888">*此说明仅当出现价格比较时适用。</p>
            </div>
      </div>
      <div class="cont_btm">
       <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服"  />
        <van-goods-action-icon icon="cart-o" text="购物车"  />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
  </div>
 
</template>

<script>
import { Toast } from 'vant';
import Vue from 'vue'
import {GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
    name:"ContView",
    data(){
        return{
            list:{}
        }
    },
    mounted(){
        this.list=this.$store.state.prot;
        console.log(this.list)
    },
     methods: {
    onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
      Toast('点击按钮');
    },
    onBack(){
        this.$router.push('home')
    }
  },
}
</script>

<style lang="scss" scoped>
    .cont{
        font-size: .3rem;
    }
    .cont_top{
        height:1rem;
        display: flex;

        line-height:.75rem;
        .van-icon{
            margin-top:.5rem;
            font-size:.5rem;
           
            margin-left:.1rem;
        }
        .cont_text{
            margin-top:.35rem;
            margin-left:2.4rem;
            font-size: .4rem;
                   
        }
    }
    .cont_content{
        img{
            width:6rem;
            height:6.5rem;
            margin:.1rem auto;
            display: block;
        }
        .cont_name{
            font-size: .35rem;
            margin-left:.5rem;
            margin-bottom:.3rem;
        }
        .cont_js{
            font-size: .28rem;
            color:#666;
            margin-left:.5rem;
            margin-bottom:.4rem;
            margin-top:-.3rem;
        }
        .cont_price{
            margin-left:.5rem;
            margin-top:-.25rem;
            height:.7rem;
            margin-bottom:.3rem;
            width:6.6rem;
            border-bottom: 0.01rem solid #e8e8e8;
        }
        .cont_price1{
            height:.6rem;
            width:6.6rem;
            margin-left:.5rem;
            font-size:.25rem;   
            color:#666;
            border-bottom: 0.01rem solid #e8e8e8;
        }
        .cont_shop{
            height:.6rem;
            width:6.6rem;
            margin-left:.5rem;
            font-size:.25rem;   
            color:#666;
            border-bottom: 0.01rem solid #e8e8e8;
            display: flex;
            .van-icon{
                margin-top:.07rem;
            }
            span{
                margin-left:.1rem;
            }
        }
    }
    .van-goods-action{
        z-index: 999;
        bottom:-.5rem;
    }
    .van-goods-action-icon{
        margin-top:-1rem;
        background: #fff;
    }
    .van-goods-action-button{
        margin-top:-1rem;
    }
    .cont_size{
        width:6.6rem;
        height:3rem;
        margin:0 auto;
    }
    .cont_title{
        font-size: .4rem;
    }
    .price_cont{
        width:6.6rem;
        height:4rem;
        margin:0 auto;
        margin-bottom:2rem;
    }
</style>